<template>
    <h2>用户登录</h2>
    <table class="table table-bordered">
        <tr>
            <td>用户名</td>
            <td><input type="text" v-model="state.name" /></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" v-model="state.pwd" /></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="button" value="登录" @click="login" /></td>
        </tr>
    </table>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted,toRefs} from 'vue'
import {useRouter,useRoute} from 'vue-router'
import axios from 'axios';
const router=useRouter();
const route=useRoute();
const data=reactive({
    state:{
        name:"",
        pwd:""
    },
})
let {state} =toRefs(data);
onMounted(()=>{
  
})

//用户登录
const login=()=>{
    //6.	用户名不能为空（1分）
    if(state.value.name=='')
    {
        alert('用户名不能为空');
        return;
    }
    //7.	密码不能为空并需要包含字母、数字、特殊字符（1分）
    if(state.value.pwd=='')
    {
        alert('密码不能为空哈哈');
        return;
    }
    var reg=/^[a-zA-Z0-9_-]{7,10}$/;
    if(!reg.test(state.value.pwd))
    {
        alert('密码格式不正确hahha');
        return;
    }
    axios({
        url:"/api/UserLogin/UserLogin",
        method:'get',
        params:state.value
    })
    .then(res=>{
        console.log(res);
        if(res.data.data==null)
        {
            alert('用户不存在');
            return;
        }
      else if(res.data.data.U_Pwd!=state.value.pwd)
        {
            alert('密码错误');
            return;
        }
        else{
            alert('登录成功');
            router.push('/usersList');
        }
       
    })
}
</script>


<style>


</style>